<script setup>
import {ref, watch} from "vue";
import processBusData from "@/components/processBusData.js";

const emits = defineEmits(['modifyConf'])
const conf = ref({
  showTeacher: false,
  showNoRemain: false,
  date: processBusData.getDateString(new Date()),
  route: 0
})
watch(() => conf.value, (newV, oldV) => {
  emits('modifyConf', newV)
  // console.log(newV)
}, {immediate: true, deep: true})

const fieldNames = {value: 'id', label: 'text'}
const allRoutes = ref([
  {
    id: 0,
    text:'全部路线'
  },
  {
    id: 7,
    text: '嘉定-宝山'
  },
  {
    id: 8,
    text: '宝山-嘉定'
  },
  {
    id: 19,
    text: '延长-宝山'
  },
  {
    id: 20,
    text: '宝山-延长'
  },
  {
    id: 29,
    text: '延长-嘉定'
  },
  {
    id: 30,
    text: '嘉定-延长'
  },
])

</script>

<template>
  <div class="nav-bar">
    <div class="left-bar">
      <a-space>
        <img
            alt="logo"
            src="@/asset/car.png" style="height: 40px;width:70px"
        />
        <a-typography-title
            :style="{ margin: 0, fontSize: '18px' }"
            :heading="5"
        >
          校车班次查询系统
        </a-typography-title>
      </a-space>
    </div>
    <ul class="right-bar">
      <li>
        <!--                       :format="(value) => `${dayjs(value).format('YYYY-MM-DD')}`"-->
        <a-date-picker v-model="conf.date" style="width: 200px;"/>
      </li>
      <li>
        <a-select v-model="conf.route" :options="allRoutes"
                  :field-names="fieldNames" placeholder="请选择校车路线"
                  :style="{width:'130px'}"
        >
        </a-select>
      </li>
      <li>
        <a-space>
          <a-switch v-model="conf.showTeacher" checked-value="true" unchecked-value="false"/>
          <a-typography-text>显示教师班车</a-typography-text>
        </a-space>
      </li>
      <li>
        <a-space>
          <a-switch v-model="conf.showNoRemain" checked-value="true" unchecked-value="false"/>
          <a-typography-text>显示无票车次</a-typography-text>
        </a-space>
      </li>
      <li>
        <a-tooltip content="">
          <a-button
              class="nav-btn"
              type="outline"
              :shape="'circle'"
              @click="setDropDownVisible"
          >
            <template #icon>
              <icon-language/>
            </template>
          </a-button>
        </a-tooltip>
        <a-dropdown trigger="click" @select="">
          <div ref="triggerBtn" class="trigger-btn"></div>
          <template #content>
            <a-doption
                v-for="item in locales"
                :key="item.value"
                :value="item.value"
            >
              <template #icon>
                <icon-check v-show="item.value === currentLocale"/>
              </template>
              {{ item.label }}
            </a-doption>
          </template>
        </a-dropdown>
      </li>
    </ul>

  </div>


</template>

<style scoped>
.left-bar {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
}

.right-bar {
  display: flex;
  padding-right: 20px;
  list-style: none;

  :deep(.locale-select) {
    border-radius: 20px;
  }

  li {
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  a {
    color: var(--color-text-1);
    text-decoration: none;
  }

  .nav-btn {
    border-color: rgb(var(--gray-2));
    color: rgb(var(--gray-8));
    font-size: 16px;
  }

}
</style>